<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>是一个完全响应式，基于Bootstrap3.3.5最新版本开发的扁平化主题，她采用了主流的左右两栏式布局</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="${ctx}/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${ctx}/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/static/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link href="${ctx}/static/css/animate.min.css" rel="stylesheet">
    <link href="${ctx}/static/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="${ctx}/static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="${ctx}/static/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
	<link rel="stylesheet" type="text/css" href="${ctx}/static/css/plugins/webuploader/webuploader.css">
</head>
<body>
	<div class="row">
		是一个完全响应式，基于Bootstrap3.3.5最新版本开发的扁平化主题，她采用了主流的左右两栏式布局
		 <form class="form-horizontal" id="signupForm">
	        <div class="form-group">
	            <label class="col-sm-3 control-label">姓氏：</label>
	            <div class="col-sm-8">
	                <input id="firstname" name="firstname" class="form-control" type="text">
	                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">名字：</label>
	            <div class="col-sm-8">
	                <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">用户名：</label>
	            <div class="col-sm-8">
	                <input id="username" name="username" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">密码：</label>
	            <div class="col-sm-8">
	                <input id="password" name="password" class="form-control" type="password">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">确认密码：</label>
	            <div class="col-sm-8">
	                <input id="confirm_password" name="confirm_password" class="form-control" type="password">
	                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">E-mail：</label>
	            <div class="col-sm-8">
	                <input id="email" name="email" class="form-control" type="email">
	            </div>
	        </div>
	        <div class="form-group">
	            <div class="col-sm-8 col-sm-offset-3">
	                <div class="checkbox">
	                    <label>
	                        <input type="checkbox" class="checkbox" id="agree" name="agree"> 我已经认真阅读并同意《H+使用协议》
	                    </label>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">
	            <div class="col-sm-8 col-sm-offset-3">
	                <button class="btn btn-primary" type="submit">提交</button>
	            </div>
	        </div>
	        <!--dom结构部分-->
			<div id="fileUploader" class="wu-example">
			    <!--用来存放文件信息-->
			    <div id="fileThelist" class="uploader-list"></div>
			    <div class="btns">
			        <div id="picker">选择文件</div>
			        <button id="ctlBtn" class="btn btn-default">开始上传</button>
			    </div>
			</div>
			<span style="margin-top: 40px;width: 100%"></span>
			<!--图片上传-->
			<div id="imageUploader">
			    <div id="imageFileList" class="uploader-list"></div>
			    <div id="imageFilePicker">选择图片</div>
			</div>
	    </form>
	</div>
</body>

<script src="${ctx}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="${ctx}/static/js/plugins/footable/footable.all.min.js"></script>
<script src="${ctx}/static/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx}/static/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx}/static/js/plugins/webuploader/webuploader.min.js"></script>

<script>
	$(function(){
		// 初始化Web Uploader
		var fileUploader = WebUploader.create({
		    // 选完文件后，是否自动上传。
		    auto: true,
		    // swf文件路径
		    swf:'${ctx}/static/css/plugins/webuploader/Uploader.swf',
		    // 文件接收服务端。
		    server: 'http://webuploader.duapp.com/server/fileupload.php',
		    // 选择文件的按钮。可选。
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		    pick: '#picker',
		 	// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		    resize: false
		});
		// 当有文件被添加进队列的时候
		fileUploader.on('fileQueued', function( file ) {
			var $list=$("#fileThelist");
		    $list.append( '<div id="' + file.id + '" class="item">' +
		        '<h4 class="info">' + file.name + '</h4>' +
		        '<p class="state">等待上传...</p>' +
		    '</div>' );
		});
		// 文件上传过程中创建进度条实时显示。
		fileUploader.on( 'uploadProgress', function( file, percentage ) {
		    var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');
		    // 避免重复创建
		    if ( !$percent.length ) {
		        $percent = $('<div class="progress progress-striped active">' +
		          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
		          '</div>' +
		        '</div>').appendTo( $li ).find('.progress-bar');
		    }
		    $li.find('p.state').text('上传中');
		    $percent.css( 'width', percentage * 100 + '%' );
		});
		fileUploader.on( 'uploadSuccess', function( file ) {
		    $( '#'+file.id ).find('p.state').text('已上传');
		});
		fileUploader.on( 'uploadError', function( file ) {
		    $( '#'+file.id ).find('p.state').text('上传出错');
		});
		fileUploader.on( 'uploadComplete', function( file ) {
		    $( '#'+file.id ).find('.progress').fadeOut();
		});
		
		
		
		//图片上传
		// 初始化Web Uploader
		var imageUploader = WebUploader.create({
			 // 选完文件后，是否自动上传。
		    auto: true,
		    // swf文件路径
		    swf:'${ctx}/static/css/plugins/webuploader/Uploader.swf',
		    // 文件接收服务端。
		    server: 'http://webuploader.duapp.com/server/fileupload.php',
		    // 选择文件的按钮。可选。
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		    pick: '#imageFilePicker',
		    // 只允许选择图片文件。
		    accept: {
		        title: 'Images',
		        extensions: 'gif,jpg,jpeg,bmp,png',
		        mimeTypes: 'image/*'
		    }
		});
		// 当有文件添加进来的时候
		imageUploader.on( 'fileQueued', function( file ) {
			var $list=$("#imageFileList");
		    var $li = $(
		            '<div id="' + file.id + '" class="file-item thumbnail">' +
		                '<img>' +
		                '<div class="info">' + file.name + '</div>' +
		            '</div>'
		            ),
		        $img = $li.find('img');
		    // $list为容器jQuery实例
		    $list.append( $li );
		    // 创建缩略图
		    // 如果为非图片文件，可以不用调用此方法。
		    var thumbnailWidth=100,thumbnailHeight=100;
		    // thumbnailWidth x thumbnailHeight 为 100 x 100
		    imageUploader.makeThumb( file, function( error, src ) {
		        if (error) {
		            $img.replaceWith('<span>不能预览</span>');
		            return;
		        }
		        $img.attr( 'src', src );
		    }, thumbnailWidth, thumbnailHeight );
		});
		// 文件上传过程中创建进度条实时显示。
		imageUploader.on( 'uploadProgress', function( file, percentage ) {
		    var $li=$('#'+file.id),$percent = $li.find('.progress span');
		    // 避免重复创建
		    if ( !$percent.length ) {
		        $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
		    }
		    $percent.css( 'width', percentage * 100 + '%' );
		});
		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
		imageUploader.on( 'uploadSuccess', function( file ) {
		    $( '#'+file.id ).addClass('upload-state-done');
		});
		// 文件上传失败，显示上传出错。
		imageUploader.on( 'uploadError', function( file ) {
		    var $li = $( '#'+file.id ),$error = $li.find('div.error');
		    // 避免重复创建
		    if (!$error.length) {
		        $error = $('<div class="error"></div>').appendTo( $li );
		    }
		    $error.text('上传失败');
		});
		// 完成上传完了，成功或者失败，先删除进度条。
		imageUploader.on( 'uploadComplete', function( file ) {
		    $( '#'+file.id ).find('.progress').remove();
		});
		
	})
</script>
</html>